<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand" style="width:60%;margin:0 auto">
          <el-form-item style="width: 40%">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{selectValue}}</p>
                <div slot="reference" class="name-wrapper">
                  <template>
                    医院：<el-select filterable clearable v-model="selectValue" placeholder="请选择">
                            <el-option
                              v-for="item in tableData"
                              :key="item.hospital"
                              :label="item.hospital"
                              :value="item.hospital">
                            </el-option>
                          </el-select>
                  </template>
                </div>
              </el-popover>
              
            </template>
          </el-form-item>

          <el-form-item style="width:40%">
            <template  slot-scope="scope">
              概率：<el-input-number v-model="counts"></el-input-number>
            </template>  
          </el-form-item>

          <el-form-item style="width:20%">
            <template  slot-scope="scope">
              <el-button type="primary" size="mini" >完成</el-button>            
              <el-button size="mini" type="danger">取消</el-button>    
            </template>  
          </el-form-item>


        </el-form>
      </template>
    </el-table-column>

    <el-table-column sortable="true" label="医院" prop="hospital"> </el-table-column>

    <el-table-column  sortable= "true" label="作用范围(公里)"> 
        <template  slot-scope="scope">
          <el-input-number v-model="scope.row.fw" :disabled="scope.row.disable"></el-input-number>
        </template>    
    </el-table-column>

    <el-table-column sortable="true" label="优先概率(%)" prop="desc">
        <template  slot-scope="scope">
          <el-input-number v-model="scope.row.gl" :disabled="scope.row.disable"></el-input-number>
        </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="primary" size="mini">添加关联</el-button>
        <el-button size="mini">编辑</el-button>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<style>
.el-table th > .cell {
  text-align: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
export default {
  data() {

    return {
      counts: 0,
      selectValue: "",
      tableData: [
        {
          hospital: "第一医院",
          fw: "7",
          gl: "3",
          disable: true
        },
        {
          hospital: "第二医院",
          fw: "5",
          gl: "6",
          disable: true
        },
        {
          hospital: "第三医院",
          fw: "4",
          gl: "10",
          disable: true
        },
        {
          hospital: "第四医院",
          fw: "11",
          gl: "13",
          disable: true
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>